<template>
  <div class="about-us">
    <div class="about-us-card">
      <h2>关于我们</h2>
      <p>我们致力于为用户提供优质的产品和服务。</p>
      <p>我们的愿景是通过技术创新，为用户带来更便捷的购物体验。</p>
      <h3>我们的核心价值</h3>
      <ul>
        <li><strong>客户至上</strong>：我们始终以客户的需求为核心。</li>
        <li><strong>追求卓越</strong>：我们不断创新，以提高产品和服务的质量。</li>
        <li><strong>诚信经营</strong>：我们遵守最高的道德标准和诚信规范。</li>
      </ul>
      <img src="https://pic2.zhimg.com/v2-cf2d4df0323f7340b4e56b9f9808696e_r.jpg" alt="公司团队" class="team-photo" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'AboutUs'
};
</script>

<style scoped>
.about-us {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #f9f9f9;
  min-height: 100vh;
}

.about-us-card {
  max-width: 600px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  color: #333;
}

.about-us h2 {
  color: #0073e6;
  font-size: 1.8em;
  margin-bottom: 15px;
}

.about-us h3 {
  color: #333;
  font-size: 1.4em;
  margin-bottom: 10px;
}

.about-us p {
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: 15px;
}

.about-us ul {
  list-style-type: none;
  padding: 0;
  margin: 20px 0;
}

.about-us li {
  font-size: 1em;
  margin-bottom: 10px;
  line-height: 1.6;
}

.about-us li strong {
  color: #0073e6;
}

.team-photo {
  width: 100%;
  height: auto;
  margin-top: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>